<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta title="文章详情">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/page/third/jquery-1.11.3.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/page/third/jcloud/js/jqcloud-1.0.4.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/page/third/jcloud/css/jqcloud.css" />
<link type="text/css" rel="stylesheet"
	href="${pageContext.request.contextPath}/page/third/bootstrap/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet"
	href="${pageContext.request.contextPath}/page/third/bootstrap/css/bootstrap.css" />
<link type="text/css" rel="stylesheet"
	href="${pageContext.request.contextPath}/page/style/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet"
	href="${pageContext.request.contextPath}/page/style/css/home.css" />

<script type="text/javascript"
	src="${pageContext.request.contextPath}/page/third/bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript">
$(function(){
/* 	$(".comment-reply-link").click(function(){
		$(".respond").insertAfter($(this));		
		//$(".respond").empty();
	}) */
	$("#submit").click(function(){
		var url="${pageContext.request.contextPath}/comment/addComments.do";
		var commentName=$("#author").val();
		var email=$("#email").val();
		var cmtcontent=$("#cmtcontent").html();
		var commentName=$("#author").val();
		var hideblogid=$("#hideid").val();
		var commentId=$("#hidecommentid").val();
		$.ajax({
			url:url,
			dataType:'html',
			type:'post',
			data:{'commentName':commentName,'email':email,'comment':cmtcontent,'blogId':hideblogid,'commentId':commentId},
			success:function(data){
					$(".commentlist").html(data);
			}
		});	
	})	
})
function replay(id,obj){
	//$(".respond").insertAfter($(obj));
	$(obj).append($(".respond").clone());
	$("#hidecommentid").val(id);
}

</script>

</head>
<body class="nav-fixed">

				<c:forEach items="${Page.result}" var="comment">
							<li id="comment-4" class="comment even thread-even depth-1 parent toparent" >
								<article id="div-comment-4" class="comment-body">
									<footer class="comment-meta">
										<div class="comment-author vcard">
											<img src="http://o82pwjziv.bkt.clouddn.com/HeadIcon/20160619/6360193403816061146452898.jpg" class="avatar avatar-70 photo" height="60" width="60">
												<b class="fn">
													<a href="" rel="external nofollow" class="floor">${comment.comentname}</a>
												</b>&nbsp;&nbsp;&nbsp;&nbsp;
												<a style="color:rgba(0, 39, 59, 0.35);" href=""><time datetime="2016/6/24 9:35:16"><fmt:formatDate value="${comment.commentdate}" pattern="yyyy/MM/dd hh:mm:ss"></fmt:formatDate></time></a>
										 		<div class="comment-metadata" style="color:#D2322D">#${comment.sort}</div>
										 </div>
									</footer>
									<div class="comment-content">
										<p>
										<c:if test="${comment.quatoComment!=null}">
											<c:forEach items="${comment.quatoComment}" var="parcmt" >
											<article  style="border: 1px solid #ccc;background-color: #e9e9e9;margin-left:35px;padding: 5px 8px;">
											</c:forEach>
											<c:forEach items="${comment.quatoComment}" var="parcmt">
											
											<!--回复评论  -->
												<li id="comment-4" class="comment even thread-even depth-1 parent" >
													<article id="div-comment-4" class="comment-body">
														<footer class="comment-meta">
															<div class="comment-author vcard">
																<img src="http://o82pwjziv.bkt.clouddn.com/HeadIcon/20160619/6360193403816061146452898.jpg" class="avatar avatar-70 photo" height="60" width="60">
																	<b class="fn">
																		<a href="" rel="external nofollow" class="floor">${parcmt.comentname}</a>
																	</b>&nbsp;&nbsp;&nbsp;&nbsp;
																	<a style="color:rgba(0, 39, 59, 0.35);" href=""><time datetime="2016/6/24 9:35:16"><fmt:formatDate value="${parcmt.commentdate}" pattern="yyyy/MM/dd hh:mm:ss"></fmt:formatDate></time></a>
															 		<div class="comment-metadata" style="color:#D2322D">#${parcmt.sort}</div>
															 </div>
														</footer>
														<div class="comment-content">
															<p>${parcmt.content}</p>
															<div class="reply">
																<a class="comment-reply-link" href="javascript:void(0)" onclick="replay('${parcmt.id}',this)">回复</a>						
															</div>										
														</div>								
													</article>
												</li>	
												 </article>
											</c:forEach>
							
											
										</c:if>
										${comment.content}
										</p>
										<div class="reply">
											<a class="comment-reply-link" href="javascript:void(0)" onclick="replay('${comment.id}',this)">回复</a>
										</div>										
									</div>								
								</article>
							</li>					
				</c:forEach>



</body>

</html>
